<template>
    <div class="container">
        <n-button @click="backPage" style="margin-top: 15px">返回</n-button>
        <n-h1>{{ blogInfo.title }}</n-h1>
        <div class="blog-content">
            <div v-html="blogInfo.content"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const axios = inject('axios')
const message = inject('message')
const dialog = inject('dialog')

const blogInfo = ref({})
onMounted(() => {
    loadBlog()
})

const loadBlog = async () => {
    let result = await axios.get(`/blog/detail?id=${route.query.id}`)
    // console.log(result)
    blogInfo.value = result.data.results[0]
    // console.log(blogInfo.value)
}

const backPage = () => {
    router.push('/')
}
</script>

<style lang="scss" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}

</style>

<style>
.blog-content img{
    max-width: 100% !important;
}
</style>